<style scoped>
.info-img-swipe{width: 100%;}
.info-img-swipe[mode="round_padding"]{padding: 8px 12px;}
.info-img-swipe[mode="round_padding"]>.van-swipe,
.info-img-swipe[mode="round"]>.van-swipe{border-radius: 8px;overflow: hidden;}
.info-img-swipe .van-swipe{background-color: var(--color-bg-0);}
.info-img-swipe .img{display: block;}
</style>
<template>
  <div class="info-img-swipe" :mode="thisData.mode">
    <van-swipe ref="swipe" indicator-color="white">
      <template v-for="v in thisData.img">
        <van-swipe-item v-if="v">
          <img-referrer class="img" style="width: 100%;" :src="v" alt=""/>
        </van-swipe-item>
      </template>
    </van-swipe>
  </div>
</template>

<script>
import {_url_static} from "@/js/s94_tool.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";

/**图片轮播图
 * @prop {Array} img 图片地址，字符
 * @prop {String} img 图片地址，多个逗号分割
 */
export default {
  components: {ImgReferrer},
  _title_: '轮播图',
  _tip_: '轮播图',
  _head_img_: '',
  _group_: '详情组件',
  props: {
    img: {
      type: [Array,String],
      default: 'https://picsum.photos/200',
      _label_: '图片',
      _tip_: '需要显示的图片，多个逗号分隔',
      _required_: true,
      _default_: "get($info,'head_img')",
      _input_type_: 'file_imgs',
    },
    mode: {
      type: String,
      _label_: '显示模式',
      _tip_: 'round、round_padding、其他，分别表示：圆角、有边距的圆角、填满',
    },
  },
  data(){
    return {}
  },
  watch:{
    'thisData.mode'(){
      setTimeout(()=>{
        this.$refs.swipe.resize();
      },20)
    }
  },
  methods:{},
  computed:{
    thisData(){
      let arr = [];
      if (this.img){
        if (typeof this.img === 'string') {
          arr = this.img.split(',');
        }else if (typeof this.img === 'object') {
          arr = Object.values(this.img);
        }
      }
      return {
        img: arr.map(src=>{
          return src ? _url_static(src) : '';
        }),
        mode: ['round_padding', 'round'].includes(this.mode) ? this.mode : '',
      }
    },
  },
  mounted(){
  }
}
</script>